'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from "@/app/cg06/hooks/useAuth";
import styles from './page.module.scss';

interface NavigationCard {
  id: string;
  title: string;
  description: string;
  path: string;
  category: 'joint' | 'own';
}

const NavigationPage: React.FC = () => {
  useAuth();
  const router = useRouter();
  
  // 联合展厅页面配置（cg06/01 到 cg06/11，中间缺少 03、04）
  const jointExhibitions: NavigationCard[] = [
    { id: 'cg06-01', title: '义乌国际数字物流市场业务数据', description: '屏幕01', path: '/cg06/01', category: 'joint' },
    { id: 'cg06-02', title: '义乌国际数字物流市场动态运力', description: '屏幕02', path: '/cg06/02', category: 'joint' },
    { id: 'cg06-05', title: '国内出口集装箱运价指数', description: '屏幕05', path: '/cg06/05', category: 'joint' },
    { id: 'cg06-06', title: '海运出运量趋势图', description: '屏幕06', path: '/cg06/06', category: 'joint' },
    { id: 'cg06-07', title: '两仓一线数字大屏', description: '屏幕07', path: '/cg06/07', category: 'joint' },
    { id: 'cg06-08', title: 'FBC 海外仓网', description: '屏幕08', path: '/cg06/08', category: 'joint' },
    { id: 'cg06-09', title: '义乌出口集装箱运价指数', description: '屏幕09', path: '/cg06/09', category: 'joint' },
    { id: 'cg06-10', title: '航运关键事件', description: '屏幕10', path: '/cg06/10', category: 'joint' },
    { id: 'cg06-11', title: '海外仓数字看板', description: '屏幕11', path: '/cg06/11', category: 'joint' },
  ];

  // 智捷元港自有展厅页面配置
  const ownExhibitions: NavigationCard[] = [
    { id: 'cg06-own', title: '轮播页面', description: '智捷元港自有展厅', path: '/cg06/own', category: 'own' },
  ];

  const handleCardClick = (path: string) => {
    const url = process.env.NEXT_PUBLIC_APP_ENV === 'development' ? path : path + '.html'
    window.open(url, '_blank');
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <p className={styles.subtitle}>选择您要访问的屏幕</p>
      </div>

      <div className={styles.content}>
        {/* 联合展厅 */}
        <section className={styles.section}>
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>🏢</span>
            联合展厅
          </h2>
          <div className={styles.cardGrid}>
            {jointExhibitions.map((exhibition) => (
              <div
                key={exhibition.id}
                className={styles.card}
                onClick={() => handleCardClick(exhibition.path)}
              >
                <div className={styles.cardHeader}>
                  <h3 className={styles.cardTitle}>{exhibition.title}</h3>
                </div>
                <div className={styles.cardBody}>
                  <p className={styles.cardDescription}>{exhibition.description}</p>
                </div>
                <div className={styles.cardFooter}>
                  <span className={styles.cardPath}>{exhibition.path}</span>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* 智捷元港自有展厅 */}
        <section className={styles.section}>
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>🏠</span>
            智捷元港自有展厅
          </h2>
          <div className={styles.cardGrid}>
            {ownExhibitions.map((exhibition) => (
              <div
                key={exhibition.id}
                className={styles.card}
                onClick={() => handleCardClick(exhibition.path)}
              >
                <div className={styles.cardHeader}>
                  <h3 className={styles.cardTitle}>{exhibition.title}</h3>
                </div>
                <div className={styles.cardBody}>
                  <p className={styles.cardDescription}>{exhibition.description}</p>
                </div>
                <div className={styles.cardFooter}>
                  <span className={styles.cardPath}>{exhibition.path}</span>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default NavigationPage;
